<template>
	<topAndMenu active="/borrow">
	<div style="width: 100%;padding:20px;">
	<el-table :data="tableData" style="width: 100%;margin-bottom:50px;" v-loading="loading">
		<el-table-column prop="book.name" label="书名"></el-table-column>
		<el-table-column>
			<template #header>借出</template>
			<template #default="scope">
				<!-- {{scope.row.lend?"已借出":"未借出"}} -->
				<sapn style="color:red;" v-if="scope.row.lend">已借出</sapn>
				<sapn style="color:blue;" v-else>未借出</sapn>
			</template>
		</el-table-column>
		<el-table-column>
			<template #header>归还</template>
			<template #default="scope">
				<!-- {{scope.row.returnStatus?"已归还":"未归还"}} -->
				<sapn style="color:blue;" v-if="scope.row.returnStatus">已归还</sapn>
				<sapn style="color:red;" v-else>未归还</sapn>
			</template>
		</el-table-column>
		<el-table-column prop="user.name" label="用户"></el-table-column>
		<el-table-column prop="createTime" label="开始时间"></el-table-column>
		<el-table-column prop="updateTime" label="更新时间"></el-table-column>
	</el-table>
	<el-pagination
	    v-model:current-page="pageNum"
	    v-model:page-size="pageSize"
	    :page-sizes="[1,5,10,20]"
	    :background="background"
	    layout="total, sizes, prev, pager, next, jumper"
	    :total="total"
	    @size-change="handleSizeChange"
	    @current-change="handleCurrentChange"
	  />
	  </div>
	  </topAndMenu>
</template>

<script setup>
	import {ref,onMounted} from "vue"
	import http from "../../request.js"
	import topAndMenu from "../components/topAndMenu.vue"
	const pageSize = ref(10)
	const pageNum = ref(1)
	const tableData = ref([])
	const total = ref(0)
	const loading = ref(true)
	onMounted(()=>{
		queryPage()
	})
	function queryPage(){
		http.get(`/borrow/queryPage?pageSize=${pageSize.value}&pageNum=${pageNum.value}`).then(res=>{
			tableData.value = res.data.data.list
			total.value = res.data.data.total
			loading.value = false
		})
	}
	function handleSizeChange(){
		queryPage()
	}
	function handleCurrentChange(){
		queryPage()
	}
</script>

<style>
</style>